<template name="find">
	<view class="bgf5">
		<!-- <scroll-view scroll-y="true" class="pages"> -->
		<view class="topbgimg">
			<view class="toptitle">
				您的健康生活
				从现在开始！
			</view>
			<view class="findView">
				<block v-for="(item,idx) in stateArr" :key="idx">
					<view class="planView" @tap="navt(idx)">
						<view class="image">
							<!-- <u-lazy-load   height="80"
								img-mode="aspectFill"
								:image="item.icon"></u-lazy-load> -->
							<image class="image" :src="item.icon" mode="scaleToFill"></image>
						</view>
						{{item.text}}
					</view>
				</block>
			</view>
		</view>
		<!-- 百科 -->
		<view class="w702 encyclopedia">
			<view class="weui-flex">
				<view class="weui-flex__item">
					<view class="placeholder titlel">
						百科
					</view>
				</view>
				<view class="weui-flex__item">
					<view class="placeholder moreAll" @tap="nav('Bk')">
						更多
					</view>
				</view>
			</view>
			<block v-for="(item,idx) in recordsBk" :key="idx">
				<view class="weui-flex" style="padding: 20upx 0;" @tap.stop="navbk(item,idx)"
					:class="recordsBk.length-1!=idx?'belowLine':''">
					<view class="weui-flex__item">
						<view class="placeholder">
							<view class="contentStyle">
								{{item.articleTitle}}
							</view>
							<text class="lookbf">{{item.readNum}}</text>
						</view>
					</view>
					<view>
						<view class="placeholder">
							<image class="imgr" :src="item.coverUrl" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 知识课堂 -->
		<view class="w702 encyclopedia" style="margin-top:30upx;" v-if="videoAlbumList.length != 0">
			<view class="weui-flex">
				<view class="weui-flex__item">
					<view class="placeholder titlel">
						知识课堂
					</view>
				</view>
				<view class="weui-flex__item">
					<view class="placeholder moreAll" @tap="nav('zs')">
						更多
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true" class="scrollViews">
				<block v-for="(item,idx) in videoAlbumList" :key="idx">
					<view class="scrollView" @tap.stop="userSwc(item,idx)">
						<u-lazy-load border-radius="10" height="221" img-mode="aspectFill"
							:image="item.albumCoverUrl||'http://static.bsyjk.cn/shop/DA121F0AC6EC44B7BC2F071C48C972F8.png'">
						</u-lazy-load>
					</view>
				</block>
				<view style="width: 90rpx;display: inline-block;">
				</view>
			</scroll-view>
		</view>
		<!-- 瀑布流圈子 -->
		<!-- <circle :leftList="leftList" :rightList="rightList" @collectTap="collectTap2"></circle> -->
		<!-- end -->
		<!-- 新版瀑布流 -->
		<view style="">
			<view class="placeholder titlel"
				style="background-color: #fff;border-radius: 16upx 16upx 0 0;height: 80upx;margin: 30upx 20upx 0 20upx;padding-top: 20upx;padding-left: 30upx;font-size: 30upx;font-weight: 500;color: #333333;opacity: 0.9;">
				圈子
			</view>
			<view class="waterfall-box h-flex-x h-flex-2">
				<view>
					<helang-waterfall v-for="(item,index) in leftList" :key="index" :params="item" tag="left"
						:index="index" @height="onHeight" @click="onClick" @collectTap="collectTap2"></helang-waterfall>
				</view>
				<view>
					<helang-waterfall v-for="(item,index) in rightList" :key="index" :params="item" @height="onHeight"
						@click="onClick" tag="right" :index="index" @collectTap="collectTap2"></helang-waterfall>
				</view>
			</view>
			<view class="load-txt">{{ajax.loadTxt}}</view>
		</view>
		<!-- end -->
		<view style="height: 60upx;">
		</view>
		<!-- </scroll-view> -->
		<view class="felxaddd" @tap.stop="issueT()">
		</view>
	</view>
</template>

<script>
	import circle from "@/components/circle/circle"
	import helangWaterfall from "@/components/helang-waterfall/helang-waterfall"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

	export default {
		components: {
			circle,
			uLazyLoad,

			"helang-waterfall": helangWaterfall
		},
		data() {
			return {
				// 按照高度加载瀑布流
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows: 4,
					// 页码
					page: 1,
				},
				// end
				pointDict: '', //评论id
				upPage: '',
				pageCurrent: 1,
				pageSize: 4,
				leftList: [],
				rightList: [],
				task: '', //评论任务
				stepId: '',
				givePoint: '',
				videoAlbumList: [], //视频推荐
				recordsBk: [], //获取到百科
				flowList: [],
				list: [],
				cyclopedia: [{
						look: 8400,
						src: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						content: '对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品',
					},
					{
						look: 8400,
						src: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						content: '对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品',
					}
				],
				stateArr: [{
						icon: 'http://static.bsyjk.cn/health/4FC2E29F201B44E999520EC938E4C7F3.png',
						text: '健康计划'
					},
					{
						icon: 'http://static.bsyjk.cn/virus/C3D3ABF152DF4960AD530AC6973882DA.png',
						text: '疾病自查'
					}, {
						icon: 'http://static.bsyjk.cn/ingredient/6F508343E8364016B357D8A8315AA68F.png',
						text: '食材库'
					}
				]
			}
		},
		onLoad() {

			uni.$on('findOnlaod', this.findOnlaod)
			uni.$on('toUpdateFabulous', this.toUpdateFabulous) //联动点赞
		},
		onShow() { //页面打开刷新
			this.ajax.page = 1;
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.pageCurrent = 1;
			this.ajax.load = true;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.articleBk(0, 1, 2) //获取百科
			this.videoAlbum(1, 2)
			this.getForumList(2, 1, this.pageSize); //获取帖子
		},
		onUnload() {
			uni.$off('findOnlaod', this.findOnlaod)
			uni.$off('toUpdateFabulous', this.toUpdateFabulous)
		},
		onReachBottom: function() { //分页加载
			let pageCurrent = this.pageCurrent += 1
			this.pageCurrent = pageCurrent;
			this.getForumList(2, pageCurrent, this.pageSize); //获取帖子
		},
		onPullDownRefresh() { //下拉刷新
			console.log('refresh');
			this.ajax.page = 1;
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.pageCurrent = 1;
			this.ajax.load = true;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.articleBk(0, 1, 2) //获取百科
			this.videoAlbum(1, 2)
			this.getForumList(2, 1, this.pageSize); //获取帖子
		},
		methods: {
			// 按照高度加载瀑布流
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(index, tag, item) {
				console.log(index, tag, item);
				// 对应的数据
				if (tag == 'left') {
					console.log(this.leftList[index]);
				} else {
					console.log(this.rightList[index]);
				}
			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				console.log(res);

				if (!res || res.length < 1) {
					this.ajax.loadTxt = '没有更多了';
					return;
				}

				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];


				// 获取插入的方向
				let getDirection = (index) => {
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if (differ >= 600 && index < 3) {
						differVal = 1;
						return 'right';
					}

					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if (differ <= -600 && index < 3) {
						differVal = -1;
						return 'left';
					}

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if (differ >= 350 && index < 2) {
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if (differ <= -350 && index < 2) {
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i + differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}

				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if (getDirection(index) == 'left') {
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					} else {
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				// 将左右列表的数据插入，第一页时则覆盖
				if (this.ajax.page == 1) {
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				} else {
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}

				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				this.ajax.page++;
			},
			// end


			toUpdateFabulous(data) { //点赞更新
				console.log(data, '1588888888888')
				let type = data.type, //当前type
					index = parseInt(data.index); //index
				if (type == 'left') {
					if (data.deleteForum) { //删除
						this.leftList.splice(index, 1);
					} else { //点赞
						this.leftList[index].upvoteNum = data.upvoteNum
					}
				} else if (type == 'right') {
					if (data.deleteForum) { //删除
						this.rightList.splice(index, 1);
					} else {
						this.rightList[index].upvoteNum = data.upvoteNum
					}
				}
			},
			findOnlaod(data) {
				// console.log(data,15333333)
				this.upPage = data.page;
				this.task = data.task;
				this.stepId = data.stepId;
				this.givePoint = data.givePoint;
				this.pointDict = data.pointDict;
			},
			//点击分享  回调
			collectTap2(item) {
				// 调用跳转详情
				this.detailsW(item.item, item.index, item.type)
			},
			videoAlbum(pageCurrent, pageSize) {
				let _this = this;
				this.$cms.get(global.apiUrls.videoAlbum + '?pageCurrent=' + pageCurrent + '&pageSize=' + pageSize +
					'&receiver=' + 1, {}).then(res => {
					let videoAlbumList = res.data.result.records;
					_this.videoAlbumList = videoAlbumList;
				})
			},
			articleBk(classifyId, pageCurrent, pageSize) {
				uni.showLoading({
					title: '加载中',
					duration: 2000
				});
				let _this = this;
				this.$cms.get(global.apiUrls.articleBk + '?classifyId=' + classifyId + '&pageCurrent=' + pageCurrent +
					'&pageSize=' + pageSize, {}).then(res => {
					// console.log(res)
					let recordsBk = res.data.result.records;
					_this.recordsBk = recordsBk //当前推荐百科
					uni.hideToast(); //隐藏
				})
			},
			getForumList(auditStatus, pageCurrent, pageSize) { //获取文章列表
				let _this = this;
				this.$cms.get(global.apiUrls.getForumList + '?auditStatus=' + auditStatus + '&keyword=' +
					'&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize + '&releaseTime=', {}).then(res => {
					// _this.list = res.data.result.records;
					let records = res.data.result.records;
					_this.loadStatus = 'loading';
					_this.addList(records)
					// 模拟数据加载
					// setTimeout(() => {
					// _this.addRandomData(records);
					// 	_this.loadStatus = 'loadmore';
					// }, 1000);
				})

			},
			issueT() {
				this.$basejs.globaltoken()
				uni.navigateTo({
					url: '/pages/subpackage/find/postAmessage/postAmessage'
				})
			},
			detailsW(item, idx, type) {
				this.$basejs.globaltoken()
				uni.navigateTo({
					url: '/pages/subpackage/find/share/share?forumId=' + item.forumId + '&page=' + this.upPage +
						'&task=' + this.task + '&pointDict=' + this.pointDict + '&index=' + idx + '&type=' + type
				})
			},
			navbk(item, idx) {
				this.$basejs.globaltoken()
				uni.navigateTo({
					url: '/pages/subpackage/find/articleDetails/details?id=' + item.articleId
				})
			},
			userSwc(item, idx) {
				this.$basejs.globaltoken()
				console.log(item, '247777777777')
				uni.navigateTo({
					url: '/pages/subpackage/find/video-detail/video-detail?id=' + item.albumId + '&tid=0'
				})
			},
			navt(idx) {
				this.$basejs.globaltoken()
				if (idx == 0) {
					uni.navigateTo({
						url: '/pagesHome/health-assessment/health-plan'
					})
				} else if (idx == 1) {
					uni.navigateTo({
						url: '/pages/subpackage/find/inquire/inquire'
					})
				} else if (idx == 2) {
					uni.navigateTo({
						url: '/pages/subpackage/find/foodImage/foodImage'
					})
				}
			},
			nav(e) {
				this.$basejs.globaltoken()
				if (e == 'Bk') {
					uni.navigateTo({
						url: '/pages/subpackage/find/cyclopedia/cyclopedia'
					})
				} else if (e == 'zs') {
					uni.navigateTo({
						url: '/pages/subpackage/find/classList/classList?tid=1'
					})
				}

			},
			addRandomData(list) {
				if (this.leftList.length >= 1) {
					this.leftList = this.leftList.concat(list)
				} else {
					this.leftList = list
				}
				// let leftList = [],
				// 	rightList = [];
				// for (let i = 0; i < list.length; i++) {
				// 	let item = list[i];
				// 	console.log(item, 230)
				// 	if (i % 2 == 0) {
				// 		leftList.push(item)
				// 	} else {
				// 		rightList.push(item)
				// 	}
				// }
				// this.leftList = this.leftList.length == 0 ? leftList : this.leftList.concat(leftList);
				// this.rightList = this.rightList.length == 0 ? rightList : this.rightList.concat(rightList);
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>
<style lang="scss">
	.felxaddd {
		width: 144upx;
		height: 144upx;
		position: fixed;
		bottom: 34upx;
		right: 30upx;
		background: url(http://static.bsyjk.cn/addbtn/D7D56F7B918E4F01BB6DFA03CEE877A5.png)no-repeat;
		background-size: 144upx 144upx;
	}

	.topbgimg {
		width: 750upx;
		height: 357upx;
		background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png);
		background-size: 750upx 357upx;
		padding-top: 108upx;
		box-sizing: border-box;

		.toptitle {
			width: 244upx;
			height: 112upx;
			font-size: 40upx;
			font-weight: 800;
			color: #FFFFFF;
			line-height: 56upx;
			margin: 0 0 0 91upx;
		}

		.findView {
			width: 586upx;
			height: 166upx;
			margin: 44upx auto 0;
		}
	}

	.planView {
		width: 166upx;
		height: 188upx;
		display: inline-block;
		background: #FFFFFF;
		box-shadow: 0px 2upx 20upx 0upx rgba(173, 173, 173, 0.25);
		border-radius: 26upx;
		text-align: center;

		.image {
			display: block;
			width: 86upx;
			height: 80upx;
			margin: 30upx auto 20upx;
		}
	}

	.planView:nth-child(2) {
		margin: 0 44upx;
	}

	.encyclopedia {
		margin: 135upx auto 0;
		padding: 24upx;
		box-sizing: border-box;
		border-radius: 16upx;
		opacity: 0.9;

		.imgr {
			width: 200upx;
			height: 160upx;
		}

		.titlel {
			height: 42px;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
		}

		.contentStyle {
			width: 440upx;
			height: 84upx;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 46upx;
		}

		.lookbf {
			height: 37upx;
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
			line-height: 37upx;
			position: relative;
			left: 60upx;
		}

		.lookbf:before {
			content: '';
			width: 44upx;
			height: 28upx;
			position: absolute;
			top: 4upx;
			left: -60upx;
			background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
			background-size: 44upx 28upx;
		}

		.moreAll {
			height: 37upx;
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
			line-height: 46upx;
			float: right;
			padding-right: 42upx;
			position: relative;
		}

		.moreAll:before {
			content: '';
			position: absolute;
			top: 4upx;
			right: 0upx;
			width: 36upx;
			height: 36upx;
			background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
			background-size: 36upx 36upx;
		}

		.belowLine {
			position: relative;
		}

		.belowLine:before {
			content: '';
			width: 100%;
			height: 2upx;
			position: absolute;
			bottom: 0;
			background: #EEEEEE;
			opacity: 0.9;
		}
	}

	.scrollViews {
		white-space: nowrap;
		display: flex;

		.scrollView {
			width: 390upx;
			height: 221upx;
			background: pink;
			display: inline-block;
			margin-right: 20upx;
			border-radius: 10upx;
			position: relative;
		}

		.scrollView:before {
			content: '';
			width: 41upx;
			height: 41upx;
			position: absolute;
			z-index: 1;
			bottom: 9upx;
			right: 11upx;
			background: url(http://static.bsyjk.cn/vidioplay/2B8379F67F904AFB90B7C7413DF6E528.png)no-repeat;
			background-size: 41upx 41upx;
		}
	}


	// 瀑布流
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-img-wrap {}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
		word-break: break-all;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.pullbl {
		width: 730upx;
		margin: 14upx auto 0;

		.pbllimagr {
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
		}

		.pbllimag {

			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
		}
	}

	.lad-image {
		width: 32upx;
		height: 32upx;
		display: block;
		float: left;
		margin-right: 10upx;
	}

	.waterfall-box {
		margin-top: -10upx;
		padding: 0 10upx 20upx 10upx;
		box-sizing: border-box;

		>view {
			padding: 0 10upx;
		}
	}
</style>
